<template>
  <div class="search-result-main">
<!--    查询框-->
    <div class="search-block">
      <div class="search-row">
        <el-input v-model="searchText" placeholder="请输入..."></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </div>
      <div class="search-tool">
        <div class="back-dashbord-btn">
          <img src="@/assets/dashboard/searchResult/backHome.png" alt="" />
          <span>返回工作台</span>
        </div>
        <div class="division"></div>
        <div class="back-dashbord-btn" v-if="mode==='single'" @click="changeMode('double')">
          <img src="@/assets/dashboard/searchResult/doubleMode.png" alt="" />
          <span>双页视图</span>
        </div>
        <div class="back-dashbord-btn" v-if="mode==='double'" @click="changeMode('single')">
          <img src="@/assets/dashboard/searchResult/singleMode.png" alt="" />
          <span>单页视图</span>
        </div>
      </div>
    </div>
<!--    分类切换-->
    <div class="search-type-row">
      <div
        class="search-type-item"
        v-for="(item,index) in searchTypeList"
        :key="index"
        :class="{ active: item.active }"
        @click="changeSearchType(item)"
      >{{ item.text }}</div>
      <div class="time-btn-double" @click="openSearchTool" ref="searchToolBtn" v-if="mode==='double'">
        <img src="@/assets/dashboard/searchResult/search-tool.png" alt="" />
        <span>搜索工具</span>
      </div>
    </div>
<!--    内容区-->
    <template v-if="mode==='single'">
      <div class="content">
        <!--      内容区左侧-->
        <div class="left-content">
          <div class="result-stat">
            <span>共检索到{{ (2000||0).toLocaleString() }}个相关结果</span>
            <div class="time-btn" @click="openSearchTool" ref="searchToolBtn">
              <img src="@/assets/dashboard/searchResult/search-tool.png" alt="" />
              <span>搜索工具</span>
            </div>
          </div>
          <!--        没有搜索结果-->
          <template v-if="!resultList.length">
            <div class="empty-result">
              <img src="@/assets/dashboard/empty-app.png" alt="" />
              <span>未检索到相关结果</span>
            </div>
          </template>
          <!--        综合搜索结果-->
          <template v-else>
            <div class="all-result">
              <comprehensive-result
                v-for="(item,index) in resultList"
                :key="index"
                :type-name="item.type"
                :data-list="item.dataList"
              ></comprehensive-result>
            </div>
            <div class="end-result">
              <div class="side_line"></div>
              <span>以显示全部搜索结果</span>
              <div class="side_line"></div>
            </div>
          </template>
        </div>
        <!--      内容区右侧-->
        <div class="right-content" ref="rightContent">
          <!--        常用应用-->
          <div class="right-subtitle">
            <span class="title-span">常用应用</span>
          </div>
          <div class="right-apps" :class="{ double: appDouble }">
            <div
              class="app-item"
              v-for="(item,index) in frequentlyUsedAppList"
              :key="index"
            >
              <img :src="item.img" alt="">
              <span>{{ item.text }}</span>
            </div>
          </div>
          <!--        近期广播-->
          <div class="right-subtitle">
            <span class="title-span">近期广播</span>
            <div class="right-tool">
              <span>更多广播</span>
              <img src="@/assets/dashboard/right-arrow.png" alt="" />
            </div>
          </div>
          <div class="right-notice">
            <div
              class="notice-item"
              v-for="(item,index) in noticeList"
              :key="index"
            >
              <div class="notice-title">{{ item.title }}</div>
              <div class="notice-content">{{ item.content }}</div>
              <div class="notice-time">{{ item.time }}</div>
            </div>
          </div>
        </div>
      </div>
    </template>

    <template v-else-if="mode==='double'">
      <div class="content-double">
        <div class="content-double-main">
          <div class="result-main">
            <div class="left-main">
              <double-result-item
                v-for="(item,index) in splitDoubleList()[0]"
                :key="Math.random()"
                :item-data="item"
                :is-odd="index%2===0"
              ></double-result-item>
            </div>
            <div class="right-main">
              <double-result-item
                v-for="(item,index) in splitDoubleList()[1]"
                :key="Math.random()"
                :item-data="item"
                :is-odd="index%2===0"
              ></double-result-item>
            </div>
          </div>
          <div class="result-page">
            <span class="num">共搜索到2000条相关结果</span>
            <el-pagination
              v-if="searchType!=='' && searchType!=='综合'"
              background
              layout="prev, pager, next"
              :total="total"
              @current-change="handleCurrentChange"
              @handleSizeChange="handleSizeChange"
              :page-size="pageSize"
              :current-page="pageNo"
            />
          </div>
        </div>
      </div>
    </template>



    <search-tool
      :now-time-type="formData.timeType"
      :now-start-time="formData.startTime"
      :now-end-time="formData.endTime"
      :now-search-types="formData.searchTypes"
      :tool-style="searchToolStyle"
      @save="saveSearchTool"
      @close="closeSearchTool"
      v-if="showSearchTool"
    ></search-tool>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { allAppList } from "@/components/workApp/components/appList";
//import timeSelector from "../components/searchResult/timeSelector.vue";
import searchTool from "../components/searchResult/searchTool.vue";
import comprehensiveResult from "../components/searchResult/comprehensiveResult.vue";
import doubleResultItem from "../components/searchResult/doubleResultItem.vue";
export default {
  name: "searchResult",
  props: {},
  components: {
    //timeSelector,
    searchTool,
    comprehensiveResult,
    doubleResultItem,
  },
  data() {
    return {
      searchTypeList: [],
      frequentlyUsedAppList: [],
      erd: null,
      appDouble: false,
      noticeList: [
        {
          title: '关于配送雇外车使用的再次重申',
          content: '集团各公司：近期发现部分公司以配送雇外车不好报销、费用高为由，目的地公司不请车满足配送需求',
          time: '2023-05-18 15:09:57',
        },
        {
          title: '关于配送雇外车使用的再次重申',
          content: '集团各公司：近期发现部分公司以配送雇外车不好报销、费用高为由，目的地公司不请车满足配送需求',
          time: '2023-05-18 15:09:57',
        },
        {
          title: '关于配送雇外车使用的再次重申',
          content: '集团各公司：近期发现部分公司以配送雇外车不好报销、费用高为由，目的地公司不请车满足配送需求',
          time: '2023-05-18 15:09:57',
        },
      ],
      showSearchTool: false,
      searchToolStyle: '',
      formData: {
        startTime: '',
        endTime: '',
        timeType: '',
        searchTypes: [],
      },
      resultList: [],
      total: 2000,
      pageSize: 20,
      pageNo: 1,
    }
  },
  computed: {
    ...mapState(['myInfo']),
    searchType: {
      get(){
        return this.$store.state.searchResult.searchType
      },
      set(val){
        this.$store.commit('setSearchResultSearchType', val)
      }
    },
    searchText:{
      get(){
        return this.$store.state.searchResult.searchText
      },
      set(val){
        this.$store.commit('setSearchResultSearchText', val)
      }
    },
    mode: {
      get(){
        return this.$store.state.searchResult.mode
      },
      set(val){
        this.$store.commit('setSearchResultMode', val)
      }
    },
    doubleResultList(){
      let arr = []
      this.resultList.forEach((rItem)=>{
        //暂时加上条件判断，开发完成后删除判断
        // if(['审核申请','公文通知'].indexOf(rItem.type)!==-1){
        //
        // }
        (rItem.dataList||[]).forEach((item,index)=>{
          if(index<5){
            if(rItem.type==='审核申请'){
              arr.push({
                type: 'normal',
                searchType: rItem.type,
                appType: item.appType,
                title: item.title,
                status: item.status,
                createUserName: item.createUserName,
                createTime: item.createTime,
              })
            }
            else if(rItem.type==='公文通知'){
              arr.push({
                type: 'normal',
                searchType: rItem.type,
                appType: item.appType,
                title: item.title,
                createTime: item.createTime,
                content: item.content,
              })
            }
            else if(rItem.type==='联系人'){
              arr.push({
                type: 'normal',
                searchType: rItem.type,
                title: item.title,
                departmentName: item.departmentName,
                gender: item.gender,
                member: item.member,
                isGroup: item.isGroup,
              })
            }
            else if(rItem.type==='会话'){
              arr.push({
                type: 'normal',
                searchType: rItem.type,
                title: item.title,
                content: item.content,
                gender: item.gender,
                createTime: item.createTime,
                sendUserName: item.sendUserName,
              })
            }
            else if(rItem.type==='文件图片'){
              arr.push({
                type: 'normal',
                searchType: rItem.type,
                title: item.title,
                size: item.size,
                source: item.source,
                createTime: item.createTime,
              })
            }
            else if(rItem.type==='功能应用'){
              arr.push({
                type: 'normal',
                searchType: rItem.type,
                title: item.title,
                appType: item.appType,
              })
            }
            else if(rItem.type==='文章'){
              arr.push({
                type: 'normal',
                searchType: rItem.type,
                title: item.title,
                appType: item.appType,
                content: item.content,
                createTime: item.createTime,
              })
            }
            else if(rItem.type==='自助机'){
              arr.push({
                type: 'normal',
                searchType: rItem.type,
                title: item.title,
                appType: item.appType,
                billNo: item.billNo,
                createTime: item.createTime,
                sendUserName: item.sendUserName,
                sendUserPhone: item.sendUserPhone,
                getUserName: item.getUserName,
                getUserPhone: item.getUserPhone,
              })
            }
            else if(rItem.type==='G3平台'){
              arr.push({
                type: 'normal',
                searchType: rItem.type,
                title: item.title,
                appType: item.appType,
                status: item.status,
                phone: item.phone,
                contact: item.contact,
                customerCode: item.customerCode,
              })
            }
          }
        })
        //数据项大于5
        if(rItem.dataList && rItem.dataList.length>5){
          arr.push(this.createDoubleItem({
            type: 'more',
            searchType: rItem.type,
          }))
        }
      })
      return arr
    },
  },
  mounted() {
    this.searchTypeList = this.$store.state.dashboard.searchTypes.map((item)=>{
      return {
        text: item.text,
        value: '',
        active: (this.$store.state.searchResult.searchType === item.text) || (item.text==='综合' && !this.$store.state.searchResult.searchType),
      }
    })
    this.formData.searchTypes = this.$store.state.dashboard.searchTypes.map((item)=>{
      return item.text
    })
    this.frequentlyUsedAppList = allAppList.slice(0,6)

    if(this.mode==='single'){
      if(this.erd){
        this.erd.uninstall(this.$refs['rightContent'])
      }
      this.getRightAppsWidth()
    }

    this.mode = 'double'
    this.resultList = [
      {
        type: '审核申请',
        dataList: [
          {
            title: '固定资产申购审核',
            appType: '固资申购',
            status: '0',
            createUserName: '王某某',
            createTime: '2024-01-10 08:58:42',
          },
          {
            title: '对账单资金审核',
            appType: 'G3平台',
            status: '1',
            createUserName: '王某某',
            createTime: '2024-01-10 08:58:42',
          },
          {
            title: '调拨申请审核',
            appType: '调拨申请',
            status: '3',
            createUserName: '王某某',
            createTime: '2024-01-10 08:58:42',
          },
          {
            title: '借用申请审核',
            appType: '借用申请',
            status: '1',
            createUserName: '王某某',
            createTime: '2024-01-10 08:58:42',
          },
          {
            title: '固定资产申购审核',
            appType: '固资申购',
            status: '2',
            createUserName: '王某某',
            createTime: '2024-01-10 08:58:42',
          },
          {
            title: '固定资产申购审核',
            appType: '固资申购',
            status: '0',
            createUserName: '王某某',
            createTime: '2024-01-10 08:58:42',
          },
        ],
      },
      {
        type: '公文通知',
        dataList: [
          {
            title: '盛辉【2023】财61号',
            appType: '我的待办',
            createTime: '2024-01-10 08:58:42',
            content: '近期，集团签单结算部根据《关于资金流净保底资金分配及管理暂行办法》文件精神，对各公司签单运费回笼情况进行专项核查，核查截止日',
          },
          {
            title: '2023年11月新员工转正通知',
            appType: '发布广播',
            createTime: '2024-01-10 08:58:42',
            content: '集团各部门、各公司：人力资源本部已将2023年9月份转正人员名单上传至公文系统，请各部门、各公司及时查收，有关事项通知如下：',
          },
          {
            title: '资产管理本部人事任命通知',
            appType: '我的日程',
            createTime: '2024-01-10 08:58:42',
            content: '集团各本部、各事业部、各公司：结合集团工作开展需要，为给员工提供更广阔的学习、轮岗机会，现面向全集团公开竞聘集团风险管理本部的相关岗位，具体如下：',
          },
          {
            title: '盛辉【2023】财61号',
            appType: '我的文章',
            createTime: '2024-01-10 08:58:42',
            content: '近期，集团签单结算部根据《关于资金流净保底资金分配及管理暂行办法》文件精神，对各公司签单运费回笼情况进行专项核查，核查截止日',
          },
          {
            title: '盛辉【2023】财61号',
            appType: '广播通知',
            createTime: '2024-01-10 08:58:42',
            content: '近期，集团签单结算部根据《关于资金流净保底资金分配及管理暂行办法》文件精神，对各公司签单运费回笼情况进行专项核查，核查截止日',
          },
          {
            title: '盛辉【2023】财61号',
            appType: '我的待办',
            createTime: '2024-01-10 08:58:42',
            content: '近期，集团签单结算部根据《关于资金流净保底资金分配及管理暂行办法》文件精神，对各公司签单运费回笼情况进行专项核查，核查截止日',
          },
        ],
      },
      {
        type: '联系人',
        dataList: [
          {
            title: '张三',
            gender: '1',
            departmentName: '信息技术本部/研发基地/应用',
            isGroup: false,
            member: 0,
          },
          {
            title: '张三',
            gender: '2',
            departmentName: '信息技术本部/研发基地/应用',
            isGroup: false,
            member: 0,
          },
          {
            title: '张三',
            gender: '',
            departmentName: '',
            isGroup: true,
            member: 20,
          },
        ],
      },
      {
        type: '会话',
        dataList: [
          {
            title: '卢俊义',
            gender: '1',
            isGroup: false,
            createTime: '2024-01-10 08:58:42',
            content: '这次活动的资金向上级部门申请了没，要抓紧时间了',
            sendUserName: '卢俊义',
          },
          {
            title: '扈三娘',
            gender: '2',
            isGroup: false,
            createTime: '2024-01-10 08:58:42',
            content: '这个月的报账资料已发送至您邮箱，请查收！',
            sendUserName: '扈三娘',
          },
          {
            title: '年会活动企划群',
            gender: '',
            isGroup: true,
            createTime: '2024-01-10 08:58:42',
            content: '活动资金已到位，抓紧时间采购活动物资',
            sendUserName: '策划员小李',
          },
        ],
      },
      {
        type: '文件图片',
        dataList: [
          {
            title: '2023年12月员工打卡记录.xlsx',
            createTime: '2024-01-10 08:58:42',
            size: 120,
            source: '与“张三”的对话',
          },
          {
            title: '资产管理本部大合照.jpg',
            createTime: '2024-01-10 08:58:42',
            size: 120,
            source: '我的收藏',
          },
          {
            title: '项目需求文档.doc',
            createTime: '2024-01-10 08:58:42',
            size: 120,
            source: '【资产管理本部】群组',
          },
        ],
      },
      {
        type: '功能应用',
        dataList: [
          {
            title: '资产申请',
            appType: '固资申购',
          },
          {
            title: '接单审核',
            appType: '自助机后台',
          },
          {
            title: '对账单管理',
            appType: 'G3平台',
          },
        ],
      },
      {
        type: '文章',
        dataList: [
          {
            title: '福建省交通运输厅党组书记、厅长陈岳峰一行莅临盛辉物流集团调研指导',
            appType: '我的文章',
            createTime: '2024-01-10 08:58:42',
            content: '为大力弘扬“四下基层”优良传统，推动资金良性循环，11月3日，福建省交通运输厅党组书记、厅长陈岳峰，',
          },
          {
            title: '福建省交通运输厅党组书记、厅长陈岳峰一行莅临盛辉物流集团调研指导',
            appType: '我的文章',
            createTime: '2024-01-10 08:58:42',
            content: '为大力弘扬“四下基层”优良传统，推动资金良性循环，11月3日，福建省交通运输厅党组书记、厅长陈岳峰，',
          },
          {
            title: '福建省交通运输厅党组书记、厅长陈岳峰一行莅临盛辉物流集团调研指导',
            appType: '我的文章',
            createTime: '2024-01-10 08:58:42',
            content: '为大力弘扬“四下基层”优良传统，推动资金良性循环，11月3日，福建省交通运输厅党组书记、厅长陈岳峰，',
          },
        ],
      },
      {
        type: '自助机',
        dataList: [
          {
            billNo: '250022387',
            createTime: '2023-05-18 15:09:05',
            sendUserName: '张三三',
            sendUserPhone: '13283008512',
            getUserName: '李四四',
            getUserPhone: '18806903877',
            appType: '自助机后台',
          },
        ],
      },
      {
        type: 'G3平台',
        dataList: [
          {
            appType: 'G3平台',
            title: '福建资深科技有限公司',
            status: '1',
            customerCode: '250022387',
            contact: '王老五',
            phone: '18901229763',
          },
        ],
      },
    ]
  },
  beforeDestroy () {
    if(this.erd){
      this.erd.uninstall(this.$refs['rightContent'])
    }
  },
  methods: {
    //双页视图搜索结果条目生成
    createDoubleItem(obj){
      let originObj = {
        type: 'normal', //条目类别 normal正常 more显示更多
        searchType: '', //搜索类别
        title: '', //标题
        appType: '', //应用类型
        headImg: '', //头像
        status: '', //状态（审核）
        createUserName: '', //创建人
        createTime: '', //创建时间
        content: '', //内容
        gender: '', //性别 1男2女3群
        departmentName: '', //部门名称
        isGroup: false, //是否群聊
        member: 0, //人数
        sendUserName: '', //发送人/发货人
        sendUserPhone: '', //发货人号码
        getUserName: '', //收货人
        getUserPhone: '', //收货人号码
        size: '', //大小
        source: '', //来源
        billNo: '', //承运单号
        phone: '', //电话号码
        contact: '', //联系人
        customerCode: '', //用户编号
      }
      for(let key in obj){
        originObj[key] = obj[key]
      }
      return originObj
    },
    //双页视图列表拆分
    splitDoubleList(){
      let index = Math.ceil(this.doubleResultList.length/2)
      return [
        this.doubleResultList.slice(0,index),
        this.doubleResultList.slice(index)
      ]
    },
    //监听宽度
    getRightAppsWidth() {
      let elementResizeDetectorMaker = require("element-resize-detector")
      this.erd = elementResizeDetectorMaker()
      this.$nextTick(()=>{
        this.erd.listenTo(
          this.$refs['rightContent'], (element)=>{
            console.log(element.clientWidth,'右侧宽度')
            if(element.clientWidth > 320){
              this.appDouble = true
            }
            else{
              this.appDouble = false
            }
          }
        )
      })
    },
    //查询结果
    handleSearch() {
      console.log(this.formData)
      console.log(this.searchText)
    },
    //切换搜索类型
    changeSearchType(row) {
      this.searchTypeList.forEach((item)=>{
        if(item.text === row.text){
          item.active = true
        }
        else{
          item.active = false
        }
      })
      this.searchType = row.text
    },
    //搜索工具配置保存
    saveSearchTool(timeType, timeRange, searchTypes){
      this.formData.timeType = timeType || '0'
      this.formData.startTime = timeRange[0] || ''
      this.formData.endTime = timeRange[1] || ''
      this.formData.searchTypes = searchTypes || []
      this.showSearchTool = false
      this.handleSearch()
    },
    //关闭搜索工具
    closeSearchTool() {
      this.showSearchTool = false
    },
    //开启搜索工具
    openSearchTool() {
      let pos = this.$refs['searchToolBtn'].getBoundingClientRect()
      this.searchToolStyle = `left:${pos.left-388}px;top:${pos.top}px;`
      this.showSearchTool = true
    },
    //切换视图模式
    changeMode(mode) {
      this.mode = mode
    },
    //分页
    handleCurrentChange(val) {
      this.pageNo = val
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
  },
  watch: {
    '$store.state.searchResult.searchText': {
      handler (newV, oldV) {
        if(newV === 'single'){
          this.getRightAppsWidth()
        }
        else{
          if(this.erd){
            this.erd.uninstall(this.$refs['rightContent'])
          }
        }
      },
      deep: true,
    }
  },
};
</script>
<style lang="less" scoped>
@textColor: #1f1e1d;
@ntalkColor: #e67529;
.search-result-main {
  width: 100%;
  height: calc(100vh - 40px);
  padding-bottom: 16px;
  overflow: hidden;
  background-color: #fff;
  position: relative;
  .search-block {
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .search-row {
      width: calc(100% - 260px);
      max-width: 1150px;
      height: 40px;
      display: flex;
      align-items: center;
      position: relative;
      /deep/ .el-input {
        width: calc(100% - 88px);
        > input {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
          border-right: 0;
          &:focus {
            border-color: #DCDFE6;
          }
        }
      }
      /deep/ .el-button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
    .search-tool {
      display: flex;
      align-items: center;
      .division {
        margin: 0 8px;
        width: 1px;
        height: 18px;
        background-color: #f2f3f6;
      }
      .back-dashbord-btn, .double-mode-btn, .single-mode-btn {
        display: flex;
        align-items: center;
        background-color: #fff;
        padding: 0 8px;
        height: 24px;
        color: @textColor;
        font-size: 14px;
        cursor: pointer;
        border-radius: 6px;
        img {
          width: 16px;
          height: 16px;
        }
        span {
          margin-left: 8px;
        }
        &:hover {
          background-color: #f2f3f6;
        }
      }
    }
  }
  .search-type-row {
    width: 100%;
    box-sizing: border-box;
    padding: 0 16px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    position: relative;
    .search-type-item {
      position: relative;
      height: 40px;
      line-height: 40px;
      color: rgba(0,0,0,0.66);
      font-size: 14px;
      margin-right: 24px;
      cursor: pointer;
      &.active {
        color: @ntalkColor;
        &::after {
          content: '';
          position: absolute;
          width: 100%;
          height: 2px;
          background-color: @ntalkColor;
          left: 0;
          bottom: 0;
        }
      }
    }
    .time-btn-double {
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      height: 22px;
      color: rgba(0,0,0,0.44);
      display: flex;
      align-items: center;
      padding: 0 8px;
      border-radius: 6px;
      cursor: pointer;
      img {
        width: 14px;
        height: 14px;
        margin-right: 8px;
      }
      &:hover {
        background-color: #f2f3f6;
      }
    }
  }

  .content {
    width: 100%;
    height: calc(100% - 114px);
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    //padding: 16px 16px 16px 0;
    padding: 16px;
    .left-content {
      width: 66%;
      box-sizing: border-box;
      padding-right: 20px;
      height: 100%;
      overflow-y: auto;
      .result-stat {
        width: 100%;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        color: rgba(0,0,0,0.44);
        position: relative;
        .time-btn {
          display: flex;
          align-items: center;
          padding: 0 8px;
          border-radius: 6px;
          cursor: pointer;
          height: 100%;
          color: rgba(0,0,0,0.44);
          img {
            width: 14px;
            height: 14px;
            margin-right: 8px;
          }
          &:hover {
            background-color: #f2f3f6;
          }
        }
      }
      .empty-result {
        width: 100%;
        height: calc(100% - 22px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        img {
          width: 90px;
          height: 90px;
        }
        span {
          font-size: 14px;
          line-height: 22px;
          color: rgba(0,0,0,0.66);
          margin-top: 16px;
        }
      }
      .all-result {
        width: 100%;
        margin-top: 16px;
      }
      .end-result {
        width: 100%;
        height: 36px;
        display: flex;
        align-items: center;
        span {
          font-size: 12px;
          color: rgba(0,0,0,0.44);
          flex-shrink: 0;
          margin: 0 8px;
        }
        .side_line {
          width: 50%;
          height: 1px;
          flex-shrink: 1;
          background-color: rgba(0,0,0,0.06);
        }
      }
    }
    .right-content {
      width: 33%;
      .right-subtitle {
        width: 100%;
        height: 22px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title-span {
          font-size: 14px;
          color: @textColor;
        }
        .right-tool {
          display: flex;
          align-items: center;
          font-size: 12px;
          color: rgba(0,0,0,0.44);
          cursor: pointer;
          img {
            margin-left: 10px;
            width: 7px;
            height: 11px;
          }
        }
      }
      .right-apps {
        width: 100%;
        height: 194px;
        overflow: hidden;
        margin-top: 4px;
        display: grid;
        grid-template-rows: repeat(3, 1fr);
        //grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        grid-template-columns: 1fr;
        grid-column-gap: 32px;
        &.double {
          grid-auto-flow: column;
          grid-template-columns: repeat(2, 1fr);
        }
        .app-item {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          height: 40px;
          padding: 12px 0;
          border-bottom: 1px solid #f2f3f6;
          cursor: pointer;
          box-sizing: content-box;
          &:nth-child(3n) {
            border-bottom: none;
          }
          img {
            width: 40px;
            height: 40px;
          }
          span {
            color: rgba(0,0,0,0.66);
            margin-left: 16px;
            font-size: 14px;
          }
        }
      }
      .right-notice {
        width: 100%;
        margin-top: 2px;
        .notice-item {
          width: 100%;
          padding: 12px 0;
          border-bottom: 1px solid #f2f3f6;
          &:last-child {
            border-bottom: none;
          }
          .notice-title {
            width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            color: @textColor;
            font-size: 14px;
            line-height: 22px;
          }
          .notice-content {
            width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            color: rgba(0,0,0,0.66);
            font-size: 12px;
            line-height: 20px;
          }
          .notice-time {
            width: 100%;
            color: rgba(0,0,0,0.44);
            font-size: 12px;
            line-height: 20px;
            margin-top: 4px;
          }
        }
      }
    }
  }

  .content-double {
    width: 100%;
    height: calc(100% - 96px);
    box-sizing: border-box;
    padding: 16px;
    background-color: #f5f7fa;
    overflow: hidden;
    .content-double-main {
      width: 100%;
      height: 100%;
      background-color: #fff;
      border-radius: 8px;
      .result-main {
        width: 100%;
        height: calc(100% - 56px);
        padding: 16px;
        overflow: auto;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        .left-main, .right-main {
          width: calc(50% - 8px);
        }
        &::-webkit-scrollbar {
          width: 6px;
        }
      }
      .result-page {
        width: 100%;
        height: 56px;
        box-sizing: border-box;
        border-top: 1px solid #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        .num {
          font-size: 14px;
          color: rgba(0,0,0,0.66);
        }
        /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
          background-color: @ntalkColor;
        }
        /deep/ .el-pagination.is-background .el-pager li.active {
          background-color: @ntalkColor;
        }
        /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
          color: @ntalkColor;
        }
        /deep/ .el-pagination.is-background .el-pager li:hover {
          color: @ntalkColor;
        }
      }
    }
  }
}
</style>
